<template>
    <div class="d1">
        <div >
            <ul>
                <li v-for="item,index in goods" class="d2" @click="fun(index)">{{item.name}}</li>
            </ul>
        </div>
        <div class="d0" ref="ul">
            <div v-for="item,index in goods" class="d3">
                {{item.name}}
                <ul>
                    <li v-for="ite in item.foods" class="d4">
                        <div class="mr10"><img :src="ite.icon" alt=""></div>
                        <div>
                            <p>{{ite.name}}</p>
                            <p>月售{{ite.sellCount}}份   好评率{{ite.rating}}%</p>
                            <h3>特价{{ite.price}}</h3>
                        </div>
                        <div class="d5"><button>+</button></div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- <xiangq></xiangq> -->
    </div>
    
</template>

<script>
    import xiangq from "../详情/xiangq"

    export default{
        props: ["goods"],    
        methods: {
            fun(i){
                console.log(this.$refs.ul.children[i].offsetTop)
                this.$refs.ul.scrollTop=this.$refs.ul.children[i].offsetTop
            }
        },
        components: {
            xiangq
        },
    }
</script>

<style>
    .d0{
        position: relative;
        width: 27.5rem;
        height: 44.5rem;
        overflow-y: scroll;
    }
    .d4{
        background-color: white;
        overflow: hidden;
        position: relative;
    }
    .d4 img{
        width: 7.2rem;
        height: 7.2rem;
    }
    .d4>div{
        float: left;
    }
    .d1{
        overflow: hidden;
    }
    .d1>div{
        float: left;
    }
    .d2{
        width: 7.9rem;
        height: 5.3rem;
        padding-left: 1.2rem;
        background-color: whitesmoke;
        /* line-height: 5.3rem; */
    }
    .d3{
        width: 95%;
        padding-left: 1.2rem;
        background-color: whitesmoke;
        
    }
    .d5{
        position: absolute;
        right: 1rem;
        bottom: .5rem;
    }
</style>